<template>
  <div style="background-color: #f5f5f5;padding: 10px;display: flex;justify-content: center;align-items: center;">
    <a-card title="房间选择" class="card" style="width: 400px;">
    <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(item) in state.list" :key="item" :title="`房间名： ${item.roomname}`"
        :label="`房间人数：${item.roomnum}/12 词库名：${item.password}`" name="123" style="margin-top: 5px;">
        <van-button type="primary" style="margin: 10px;" :name="item.roomnum" @click="clickRoom">加入房间</van-button>
      </van-cell>
    </van-list>
    <div style="text-align: center;">
      <van-button type="primary" style="margin: 10px;" @click="createRoom">新建房间</van-button>

    </div>
  </a-card>
  </div>
</template>
<script>
import { defineComponent, reactive } from 'vue';
import { useRouter } from 'vue-router';
import socket from '@/socket';
import axios from 'axios';
import url from '@/main';
//import {message}from 'ant-design-vue'
export default defineComponent({
  name: 'App',
  components: {
  },
  setup() {
    const router = useRouter()
    //console.log(store.rooms)
    const state = reactive({
      loading: false,
      finished: false,
      list: []
      //list:[1,2,3]
    });
    //axios.get('http://47.101.35.155:3000/rooms')
    axios.get('http://'+url+':3000/rooms')
      .then(response => {
        console.log(response.data)
        state.list = response.data
      })
    const onLoad = () => {
        state.loading = false;
    };
    const clickRoom = (e) => {
      const num = e.target.getAttribute('name')
      socket.emit('join_room',num,localStorage.getItem('username'))
      router.push('/cusdraw')
    }
    const createRoom = () => {
      localStorage.removeItem('wordcontent');
      router.push('/roomCreate')
    };

    return {
      state,
      onLoad,
      router,
      createRoom,
      clickRoom
    }
  }
})
</script>
    
<style lang="css">
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  text-align: center;
  width: 2000px;
}

.input {
  margin-right: 10px;
  width: 200px;
}

.password {
  margin-right: 10px;
  width: 100px;
}

.button {
  margin-top: 10px;
}
</style>